<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/plugins/comments-master/css/index.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/common.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>

</head>
<script>
    $(function () {

        //拿到当前登录的用户，要求必须登录之后才能评论
        var currentuser;
        currentuser = JSON.parse(sessionStorage.getItem("user"));
        //获取该文章的id
        var id = getParams().id;

        var commmentmodel;

        //给评论按钮绑定点击事件
        $("#commentBtn").click(function () {
            if (!currentuser) {
                alert("想要评论的话，请先登录");
                var message = confirm("点击确定跳转到登录界面");
                if (message) {
                    window.location.href = "/login.html";
                } else {
                    return;
                }
            }
            //将删除了的评论模态窗拼回来
            $(".contents").append(commmentmodel);
        })


        //===================================================================
        //下面是评论窗口的js代码
        $(".btn_send").on('click', function () {
            var now = time();
            //获取评论信息
            var text_send = $("#text_send").val();
            if (text_send == "") {
                return false;
            }
            var html;
            //拿到当前登录评论的用户id，还有所评论的事物的id,发送一个post请求
            //当我评论的时候，就拿到当前评论的用户和评论的事物的id，还有当前的时间，发送一个ajax请求
            $.ajax({
                url: "/comments",
                type: "POST",
                data: {
                    'user.id': currentuser.id,
                    'travel.id': 0,
                    'strategyComment.id': 0,//麻蛋，逼着我传值
                    'daily.id': id,//麻蛋，逼着我传值
                    'comment.id': 0,//麻蛋，逼着我传值
                    creatTime: now,
                    content: text_send,
                    commenttype: 3//评论日报的
                },
                success: function (data) {
                    if (data.success) {
                        html = '<div class="col-md-12 col-sm-12 col-xl-12 one cont">' +
                            '<div class="col-md-2 col-sm-2 col-xl-12 one img">' +
                            '<img  id="commentimg" src="' + currentuser.headImgUrl + '">' + '<p class="tent">' + currentuser.nickName + '</p>' +
                            '</div>' +
                            '<div class="col-md-10 col-sm-10 csm-xl-12 one content">' +
                            '<div class="comment-right">' +

                            '<div class="comment-content-header three">' +
                            '<span><i class="glyphicon glyphicon-time two"></i>' + now + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '<span><i class="glyphicon glyphicon-map-marker two"></i>' + currentuser.place + '</span>' +
                            '</div>' +
                            '<p class="tent">' + text_send + '</p>' +
                            '<div class="reply-list three">' +

                            '</div>' +
                            '<div class="col-md-12 col-sm-12 col-xl-12 content_text one three">' +
                            '<textarea class="col-md-10 col-sm-10 col-xl-10 con_back" id="con_back"></textarea>' +
                            '<div class="col-md-2 col-sm-2 col-xs-2 btn btn_back" data-fid="' + data.data.id + '">评论</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                        $(".tent_info").append(html);
                        $(".text_send").val("");

                        //这个是给生成的评论框的按钮绑定点击事件的
                        $(".tent_info").on('click', '.btn_back', function () {
                            var back_time = time();
                            //获取评论信息
                            var con_back = $(this).parent().parent().parent().find("#con_back").val();
                            if (con_back == "") {
                                return false;
                            }
                            //如果有内容的话就发送ajax请求，往评论表里面添加内容
                            $.ajax({
                                url: "/comments",
                                type: "POST",
                                data: {
                                    'user.id': currentuser.id,
                                    'travel.id': 0,//麻蛋，逼着我传值
                                    'strategyComment.id': 0,//麻蛋，逼着我传值
                                    'daily.id': 0,//麻蛋，逼着我传值
                                    'comment.id': $(this).data("fid"),
                                    creatTime: back_time,
                                    content: con_back,
                                    commenttype: 4//评论评论的
                                }
                            })

                            var html_back;
                            html_back = '<div class="reply">' +
                                '<div class="three">' +
                                '<a class="replyname">' + currentuser.nickName + '</a>:<span >' + back_time + '</span><span>' + currentuser.place + '</span>' +
                                '</div>' +
                                '</div>' +
                                '<p><span>' + con_back + '</span></p>';
                            $(this).parent().parent().parent().find(".reply-list").append(html_back);
                            $(this).parent().parent().parent().find("#con_back").val("");
                        })
                        alert("评论成功，获得1积分");
                    }
                }
            })
        })

        $(".content_text").show();

        //评论分页的功能
        var currentPage = 1;
        var pages;

        //页面加载完之后获取所有的评论，拼接在游记的下面
        $.get("/dailys/" + id + "/comments", function (data) {
            pages = data.pages;//拿到总页数
            $.each(data.list, function (index, ele) {
                //渲染所有的评论
                var comment = dataModal(ele);
                //将这一块div拼在游记的下面
                $("body").append(comment);

                setTimeout(function () {
                    $.each(ele.comments, function (index, cle) {
                        var childcomment;
                        childcomment = '<div class="reply">' +
                            '<div class="three">' +
                            '<a class="replyname">' + cle.user.nickName + '</a>:<span >' + cle.creatTimeMsg + '</span><span>' + currentuser.place + '</span>' +
                            '</div>' +
                            '</div>' +
                            '<p><span>' + cle.content + '</span></p>';

                        $(".prentdiv" + ele.id + "").find(".reply-list").append(childcomment);
                    })
                }, 10)
            })
            //这个是使得渲染回来的那些评论生效的
            childModal();
        })


        //评论的分页
        //设置窗口的滚动事件，用于翻页
        $(window).scroll(function () {
            if (isEnd()) {
                if (currentPage < pages) {
                    //如果没有到达底部的话，就当前页自增之后，发送get请求，获取第二页的数据
                    currentPage++;
                    $.get("/dailys/" + id + "/comments", {currentPage: currentPage}, function (data) {
                        $.each(data.list, function (index, ele) {

                            //渲染分页回来的评论
                            var comment = dataModal(ele);

                            //将这一块div拼在游记的下面
                            $("body").append(comment);

                            //分页回来的数据中，拼接子评论
                            setTimeout(function () {
                                $.each(ele.comments, function (index, cle) {
                                    var childcomment;
                                    childcomment = '<div class="reply">' +
                                        '<div class="three">' +
                                        '<a class="replyname">' + cle.user.nickName + '</a>:<span >' + cle.creatTimeMsg + '</span><span>' + currentuser.place + '</span>' +
                                        '</div>' +
                                        '</div>' +
                                        '<p><span>' + cle.content + '</span></p>';

                                    $(".prentdiv" + ele.id + "").find(".reply-list").append(childcomment);
                                })
                            }, 10)
                        })

                        childModal();//使得回来的评论有点击事件
                    })
                } else {
                    //如果滚动到了底部就给个友好的提示，使用dialog这个插件进行有好的提示
                    $(document).dialog({
                        type: 'notice',
                        infoText: "已经到底了，兄地,再滚就穿了",
                        autoClose: 1500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        })

        //页面加载完就删除掉评论框的模块
        commmentmodel = $("#commentModel").detach();

        //判断有没有这个参数
        if (id) {
            //发送get请求，拿到这篇游记
            $.get("/dailys/" + id, function (data) {
                console.log(data);
                //数据拿到了，就开始渲染把
                $(".newsDetail").renderValues(data);

            })
        }


        $.ajax({
            url: "/enshrine/" + currentuser.id + "/dailys/" + id,
            type: "get",
            data: {},
            dataType: "json",
            success: function (result) {
                ////收藏过的话 再点击收藏按钮将取消收藏 并在表格中删除记录
                if (result == 1) {
                    $("#pick").text("已收藏")
                }
            },
        });

        //给收藏元素绑定点击事件
        $(".caption").click(function () {
            //判断该用户是否登录
            if (currentuser) {
                //查询该用户是否收藏过这篇纹章
                $.ajax({
                    url: "/enshrine/" + currentuser.id + "/dailys/" + id,
                    type: "get",
                    data: {},
                    dataType: "json",
                    success: function (result) {
                        ////收藏过的话 再点击收藏按钮将取消收藏 并在表格中删除记录
                        if (result == 1) {
                            $.get("/enshrine/delete/" + currentuser.id + "/" + id);
                            $(document).dialog({
                                type: 'notice',
                                infoText: "已取消收藏!",
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            $("#pick").text("收藏")
                        } else {
                            $("#pick").text("")
                            $("#pick").text("已收藏")
                            //没有收藏的话提示收藏 并且新增记录
                            $.get("/enshrine/save/" + currentuser.id + "/" + id);
                            $(document).dialog({
                                type: 'notice',
                                infoText: "已收藏!",
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    },
                });

            } else {
                //用户没有登录提示他登录
                $(document).dialog({
                    type: 'notice',
                    infoText: "使用收藏功能需要先登录!",
                    autoClose: 1500,
                    position: 'center'  // center: 居中; bottom: 底部
                });
            }
        })


        function childModal() {
            $(".content_text").on('click', '.renderBtn', function () {
                var back_time = time()

                var commentId = $(this).data("id");//拿到到当前被评论的id

                //获取评论信息
                var con_back = $(this).parent().parent().parent().find("#con_back").val();
                if (con_back == "") {
                    return false;
                }
                //如果有内容的话就发送ajax请求，往评论表里面添加内容
                $.ajax({
                    url: "/comments",
                    type: "POST",
                    data: {
                        'user.id': currentuser.id,
                        'travel.id': 0,//麻蛋，逼着我传值
                        'strategyComment.id': 0,//麻蛋，逼着我传值
                        'daily.id': 0,//麻蛋，逼着我传值
                        'comment.id': commentId,
                        creatTime: back_time,
                        content: con_back,
                        commenttype: 4//评论评论的
                    }
                })

                var html_back;
                html_back = '<div class="reply">' +
                    '<div class="three">' +
                    '<a class="replyname">' + currentuser.nickName + '</a>:<span >' + back_time + '</span><span>' + currentuser.place + '</span>' +
                    '</div>' +
                    '</div>' +
                    '<p><span>' + con_back + '</span></p>';
                $(this).parent().parent().parent().find(".reply-list").append(html_back);
                $(this).parent().parent().parent().find("#con_back").val("");
            })
        }




    })

    //返回一个已经渲染好的div
    function dataModal(ele) {
        return '<div class="col-md-12 col-sm-12 col-xl-12 one cont prentdiv' + ele.id + '">' +
            '<div class="col-md-2 col-sm-2 col-xl-12 one img">' +
            '<img  id="commentimg" src="' + ele.user.headImgUrl + '">' + '<p class="tent">' + ele.user.nickName + '</p>' +
            '</div>' +
            '<div class="col-md-10 col-sm-10 csm-xl-12 one content">' +
            '<div class="comment-right">' +

            '<div class="comment-content-header three">' +
            '<span><i class="glyphicon glyphicon-time two"></i>' + ele.creatTimeMsg + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
            '<span><i class="glyphicon glyphicon-map-marker two"></i>' + ele.user.place + '</span>' +
            '</div>' +
            '<p class="tent">' + ele.content + '</p>' +
            '<div class="reply-list three">' +

            '</div>' +
            '<div class="col-md-12 col-sm-12 col-xl-12 content_text one three">' +
            '<textarea class="col-md-10 col-sm-10 col-xl-10 con_back" id="con_back"></textarea>' +
            '<div class="col-md-2 col-sm-2 col-xs-2 btn renderBtn" data-id="' + ele.id + '">评论</div>' +
            '</div>' +
            '</div>' +
            '</div>';
    }

    function isEnd() {
        //返回true或者false
        return $(window).height() + $(window).scrollTop() >= $(document).height();
    }

    //定义了一个获取当前评论时间的js
    function time() {
        function time(s) {
            return s < 10 ? '0' + s : s;
        }

        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        var s = myDate.getSeconds();
        return year + '-' + time(month) + "-" + time(date) + " " + time(h) + ':' + time(m) + ":" + time(s);
    }
</script>
<body>
<div class="contents">
    <div class="newsDetail">
        <div>
            <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
                <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
            </a>
            <img render-src="coverUrl" width="100%">

            <div class="container">
                <div class="detail">
                    <h2 class="title" render-html="title"></h2>
                    <div class="content" render-html="dailyContent.content"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="caption" style="float:right">
        <span> </span>
        <i class="fa fa-heart-o" id="pick">收藏</i>
    </div>

    <div class="container d-flex lastdiv">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill">
            <i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill">
            <i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>
<section class="tent_info col-xs-5" id="commentModel">
    <div style="margin-bottom: 20px" class="col-xs-5 textarea one">
        <textarea class="text_send" id="text_send"></textarea>
        <div class="col-xs-12 btn btn_send">评论</div>
    </div>
</section>
</body>

</html>